<template>
    <div class="emergency-container">
        <h3 class="emergency-title">
            {{ emergencyTitle }}
            <img src="../assets/icon-3.png" alt="" />
        </h3>
        <div class="emergency-box">
            <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in emergencyObj"
                    :key="index"
                    :color="activity.color"
                    :timestamp="activity.timestamp"
                >
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        emergencyObj: Object,
        emergencyTitle: String
    },
    data() {
        return {};
    }
};
</script>

<style lang="scss" scoped>
.emergency-container {
    text-align: left;
    color: #fff;
    ::v-deep .el-timeline-item__content {
        color: #ddd;
        font-size: 16px;
    }
    ::v-deep .el-timeline-item__node::before {
        display: inline-block;
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ddd;
    }
    ::v-deep .el-timeline-item__timestamp {
        text-align: right;
    }
    .emergency-title {
        padding: 0 0 0 20px;
        margin: 0;
        line-height: 44px;
        font-size: 16px;
        text-align: left;
        font-weight: normal;
        border-bottom: 1px solid #29304d;
        img {
            margin-left: 10px;
        }
    }
    .emergency-box {
        padding: 20px 20px 0;
    }
}
</style>
>
